import {designComponent, onMounted, reactive, useRefs} from "plain-design-composition";
import React from "react";
import {PlBadge, PlButton, PlDropdown, PlDropdownGroup, PlDropdownMenu, PlDropdownOption, PlIcon, PlInput, PlPopper, PlTooltip} from "plain-design";
import {LoginService} from "@/login/LoginService";
import {ManagerBell} from "@/application/manager/home/components/ManagerBell";
import {nav} from "@/micro/nav/nav";
import {iManagerMenu, iManagerMenuGroup} from "@/application/manager/ManagerMenuService";

export const ManagerHead = designComponent({
    emits: {
        onToggleCollapse: () => true,
    },
    setup: ({event: {emit}}) => {

        const {refs, onRef} = useRefs({input: PlInput})

        const state = reactive({
            isMounted: (() => {
                onMounted(() => state.isMounted = true)
                return false
            })(),
            isSearchInputFocus: false,
        })

        return () => (
            <div className="pro-manager-head">
                <PlButton icon="el-icon-s-fold" mode="text" size={'large'} onClick={emit.onToggleCollapse}/>
                <div className={'pro-manager-crumbs'}>
                    {(() => {
                        const {value: tab} = nav.currentTab
                        if (!tab) {return null}
                        const {group, menu} = tab.data as { group?: iManagerMenuGroup, menu?: iManagerMenu }
                        if (!!group && !!menu) {
                            return [group.name, <PlIcon icon={'el-icon-arrow-right'} key={'space'}/>, menu.name]
                        } else {
                            return tab.title
                        }
                    })()}
                </div>
                <div className={'pro-manager-head-placeholder'}/>
                <PlButton icon="el-icon-search" mode="text" size={'large'} onClick={() => refs.input!.methods.focus()}/>
                <PlInput
                    ref={onRef.input}
                    width={state.isSearchInputFocus ? 200 : 0}
                    onFocus={() => state.isSearchInputFocus = true}
                    onBlur={() => state.isSearchInputFocus = false}
                    className="pro-manager-head-search-input"
                />
                <PlTooltip tooltip={'在线文档'} placement={'bottom'}>
                    <PlButton icon="el-icon-document" mode="text" size={'large'}/>
                </PlTooltip>
                <PlPopper placement="bottom" arrow={false} trigger="click" width={400} noContentPadding popperClass={"manager-bell-popper"}>
                    {{
                        default: () => (
                            <PlBadge dot className="pro-manager-bell-badge">
                                <PlButton icon="el-icon-bell" mode="text" size={'large'}/>
                            </PlBadge>
                        ),
                        popper: () => <ManagerBell/>,
                    }}
                </PlPopper>
                <PlDropdown arrow={false} sizeEqual placement={'bottom'}>
                    {{
                        default: () => <div className="pro-manager-head-user-info">
                            <img src={LoginService.user.info.avatar}/>
                            <div>
                                <span>{LoginService.user.info.name}</span>
                                <span>{LoginService.user.info.position}</span>
                            </div>
                        </div>,
                        popper: () => <PlDropdownMenu>
                            <PlDropdownGroup>
                                <PlDropdownOption label={'个人中心'} icon="el-icon-s-custom"/>
                                <PlDropdownOption label={'个人设置'} icon="el-icon-setting"/>
                            </PlDropdownGroup>
                            <PlDropdownOption style={{padding: '5px 20px'}} label={'退出登录'} icon="el-icon-switch-button" onClick={() => LoginService.logout()}/>
                        </PlDropdownMenu>
                    }}
                </PlDropdown>
            </div>
        )
    }
})